// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { h, fragment } from '@knno/dom/jsx';
import { vars } from '@knno/ui/global.css';
import { Input, UIInput } from '@knno/ui/jsx/input';
import { Table, UITable } from '@knno/ui/jsx/table';
import { bar } from './index.css';
import { Radio } from '@knno/ui/jsx/radio';
import { Checkbox } from '@knno/ui/jsx/checkbox';
import { Button } from '@knno/ui/jsx/button';

export function ShowTable() {
	let tb: UITable;
	let fixColumnInput: UIInput;

	function addColumn() {
		tb.columns([
			{ title: '列1', key: 0, align: 'center', sortable: true, width: '200px', resizable: true },
			{ title: '列2', key: 1, sortable: true, width: '10%', resizable: true },
			{ title: '列3', key: 2, align: 'right', width: '10%', resizable: true },
			{ title: '列4', key: 3 },
			{ title: '列5', key: 3 },
			{ title: '列6', key: 3, resizable: true },
			{ title: '列7', key: 3, width: '15%', resizable: true },
		]);
	}

	function addData() {
		const result = [];
		let sum = 0;
		for (let i = 1; i <= 30; i++) {
			sum += i;
			const row = [];
			for (let j = 0; j < 4; j++) {
				row.push('一些数据' + Math.floor(Math.random() * 5));
			}
			result.push(row);
			if (i % 10 === 0) {
				result.push({ section: '合计：' + sum });
			}
		}
		console.log('data generated!');
		tb.rows(result);
	}

	return (
		<>
			<h2>表格（分页展示列表数据或数据少于100行建议使用此控件</h2>
			<div class={bar}>
				<Button type="primary" text="添加表头" onclick={addColumn} />
				<Button
					type="danger"
					text="删除表头"
					onclick={() => {
						tb.columns([]);
					}}
				/>
				<Button type="primary" text="添加数据" onclick={addData} />
				<Button
					type="danger"
					text="删除数据"
					onclick={() => {
						tb.rows([]);
					}}
				/>
				<span style={{ margin: '0 1rem' }}> | </span>
				<Input ref={(i) => (fixColumnInput = i)} placeholder="固定列" type="number" style={{ width: '10rem' }} />
				<Button
					text="设置固定列"
					onclick={() => {
						tb.fixColumns(parseInt((fixColumnInput.value() as string) || '0'));
					}}
				/>
			</div>
			<div class={bar}>
				<span style={{ color: vars.color.brand }}>排序</span>
				<Radio group="sort" text="无" checked={true} onclick={() => tb.sortType('none')} />
				<Radio group="sort" text="简单" onclick={() => tb.sortType('simple')} />
				<Radio group="sort" text="组合" onclick={() => tb.sortType('combine')} />
				<span style={{ margin: '0 1rem' }}>|</span>
				<span style={{ color: vars.color.brand }}>列宽：</span>
				<Radio group="table-size" text="自适应" checked={true} onclick={() => tb.columnSize('auto')} />
				<Radio group="table-size" text="按比例分配" onclick={() => tb.columnSize('scale')} />
				<Radio group="table-size" text="绝对值" onclick={() => tb.columnSize('fixed')} />
				<span style={{ margin: '0 1rem' }}>|</span>
				<Checkbox
					text="表格固定高度"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								tb.css('height', '300px');
							} else {
								tb.css('height', '');
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}>|</span>
				<Checkbox
					text="始终显示列边框"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								tb.columnBorder(true);
							} else {
								tb.columnBorder(false);
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}>|</span>
				<Checkbox
					checked={true}
					text="显示表头"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								tb.headLine(true);
							} else {
								tb.headLine(false);
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}>|</span>
				<Checkbox
					checked={false}
					text="复选框"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								tb.selectable(true);
							} else {
								tb.selectable(false);
							}
						});
					}}
				/>
				<span style={{ margin: '0 1rem' }}>|</span>
				<Checkbox
					checked={false}
					text="行选择"
					ref={(ck) => {
						ck.on('click', () => {
							if (ck.checked()) {
								tb.activable(true);
							} else {
								tb.activable(false);
							}
						});
					}}
				/>
			</div>
			<Table
				section={{ key: 'section' }}
				ref={(t) => {
					tb = t;
					// addColumn();
					// addData();
				}}
				onrowclick={(evt) => {
					console.log(evt);
				}}
			/>
		</>
	);
}
